<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <h1>简单计算器</h1>
        <div>
            <span>数值A:</span>
            <span><input type="text" v-model='a'></span>
        </div>
        <div>
            <span>数值B:</span>
            <span><input type="text" v-model='b'></span>
        </div>
        <div>
            <button v-on:click="handle">计算</button>
        </div>
        <div>
            <span>计算结果:</span>
            <span v-text='result'></span>
        </div>
        
    </div>

    <script type="text/javascript">
       var vm = new Vue({
           el:'#app',
           data:{
                a:'',
                b:'',
                result:''
           },
           methods:{
                handle: function(){
                    // 实现计算逻辑
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
                
           }
       })      
       
    </script>
</body>
</html>


       